<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            margin: 0;padding: 0;
        }
        ul,li,h2{
            margin: 0;padding: 0;
            list-style: none;
        }
        body{
            background: #eee;
            position: relative;
        }
        #box{
            width: 500px;height:500px;
            box-sizing: border-box;
            padding: 0 20px;
            background: #fff;
            position: absolute;
            left:0;top:0;right:0;bottom:0;
            margin: auto;
            box-shadow: 0px 0px 20px 20px #ddd;
            border: solid 1px #ddd;
            border-radius: 10px;
        }
        #box h2{
            line-height: 100px;
        }
        #box ul{
            display: flex;
            height: 50px;
            background: #eee;
        }
        #box ul li{
            flex: 1;
            text-align: center;
            line-height: 50px;
        }
        .cont form label{
            display: block;
            margin: 30px 0;
        }
        .cont form span{
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        .cont form input{
            height: 40px;
            width: 300px;
        }
        .cont p{
            line-height: 50px;
            text-align: center;
        }
        #btn{
            display: block;
            margin: 0 auto;
        }
        #box li.active{
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>请输入登录信息</h2>
        <ul><li class="active">登录</li><li>注册</li></ul>
        <div class="cont">
            <form>
                <label for=""><span>用户名：</span><input type="text" id="username"></label>
                <label for=""><span>密码：</span><input type="text" id="password"></label>
                <input type="button" value="登录" id="btn">
            </form>
            <p></p>
        </div>
    </div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>

<script>
    // 读用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 解析用户信息
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }
    // 查找是否有登录用户
    var onoff = false;
    for(var i=0;i<uMsg.length;i++){
        if(uMsg[i].isLogin === "ok"){
            onoff = true;
            break;
        }
    }
    // 有登录用户，没有必要重复登录
    if(onoff){
        // 回到首页
        location.href = "../index.html";
    }
</script>

<script>
    $("#box").find("li").eq(0).click(function(){
        $("#btn").val("登录")
        $(this).addClass("active").siblings().removeClass("active");
        $("#box").find("h2").html("请输入登录信息");
    })

    $("#box").find("li").eq(1).click(function(){
        $("#btn").val("注册")
        $(this).addClass("active").siblings().removeClass("active");
        $("#box").find("h2").html("请输入注册信息");
    })

    // 先读数据（读到了，不是第一次，没读到是第一次）
    var uMsg = localStorage.getItem("userMsg");
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }


    $("#btn").click(function(){
        if($(this).val() === "登录"){
            // 调用登录功能
            login();
        }else{
            // 调用注册功能
            register();
        }
    })


// 定义登录功能
function login(){
    // 记录是有出现用户名的状态
    var onoff = false
    // 遍历数据
    for(var i=0;i<uMsg.length;i++){
        // 比对用户名
        if(uMsg[i].un === $("#username").val()){
            onoff = true
            break;
        }
    }
    // 用户名比对成功
    if(onoff){
        // 判断密码
        if(uMsg[i].pw === $("#password").val()){
            // 提示信息
            $("#box").find("p").html("登录成功，3秒后跳转到<a href='../index.html'>首页</a>");
            // 跳转功能
            setTimeout(function(){
                location.href = "../index.html";
            },3000)
            // 修改当前登录账号的登录状态
            uMsg[i].isLogin = "ok";
            // 以上只是在操作数组，并没有操作数据，重新设置导到覆盖的目的
            localStorage.setItem("userMsg",JSON.stringify(uMsg));
        }else{
            // 密码比对失败
            $("#box").find("p").html("用户名密码不匹配，请重新输入");
            $("#password").val("");
        }
    }else{
        // 用户名查找失败
        $("#box").find("p").html("用户名不存在，请先注册");
    }
}


// 注册功能
    // 要注册（存储）的用户信息的格式
    // [{un:"admin",pw:123456,isLogin:"ok"},{un:"root",pw:"asdzxc",isLogin:"ok"},...]
    
// 定义注册功能
function register(){
    // 存数据
    if(uMsg.length < 1){
        // 第一次注册，直接存
        uMsg.push({
            un:$("#username").val(),
            pw:$("#password").val(),
            isLogin:""
        })
        $("#box").find("p").html("注册成功，请登录")
    }else{
        // 不是第一次，判断或用户名有没有重复
        var onoff = false;
        for(var i=0;i<uMsg.length;i++){
            if(uMsg[i].un === $("#username").val()){
                onoff = true;
                break;
            }
        }
        if(onoff){
            // 重复：注册失败，用户名重复
            alert("注册失败，用户名重复，请换一个")
            $("#box").find("p").html("");
            $("#username").val("");
            $("#password").val("");
        }else{
            // 不重复：直接存，注册成功
            uMsg.push({
                un:$("#username").val(),
                pw:$("#password").val(),
                isLogin:""
            })
            $("#box").find("p").html("注册成功，请登录")
        }
    }
    localStorage.setItem("userMsg", JSON.stringify(uMsg));
}
</script>
</html>